<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="/public/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/public/css/min.css">
    <title th:text="${session.lang == 'en' ? product.titleEn : product.title}"></title>
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <link rel="stylesheet" href="/public/css/style.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="/public/css/pagenavi-css.css" type="text/css" media="all"/>
    <script type="text/javascript" src="/public/js/jquery-1.11.3.min.js"></script>
    <style>
        .table table {
            border-collapse: collapse;
        }
        table {
            table-layout: fixed;
            width: 100% !important;
        }
        table colgroup col:first-child {
            width: 250pt !important;
        }
        .table td {
            border: 1px solid black;
            padding: 10px 0px 10px 50px;
        }
    </style>
</head>
<body data-theme-url="" data-device="desktop"
      class="home page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php page page-id-5 language-en">
<div class="loadingBg">
    <div class="loadinglg">
        <div class="ldlogo"></div>
        <div class="ldbg"></div>
    </div>
</div>
<div class="scroller-wrapper" scrollbar>
    <div class="component-transition-line">
        <div class="transition-line__wrapper">
            <div class="transition-line__line">
                <svg class="transition-line__svg" x="0px" y="0px" viewBox="0 0 1920 3105">
                    <path fill="none" stroke-width="4"
                          d="M861.1,1200c120.8-257.7,320.9-290.4,379.8-527.1c30-120.7-0.7-237.2-5.8-255.8 c-35.3-128.4-114.8-193.9-158-232C1036.8,149.8,960.6,82.7,881.7-4.5"/>
                    <path fill="none" stroke-width="4"
                          d="M695,3102c5.5-82.9,49.5-158,86.1-221.6c90.3-157,135.5-235.5,148-265.1c18.3-43.5,91.8-217.8,72-422.5 c-7.1-72.8-39.4-160.8-104-336.9c-70.6-192.2-84.4-195.4-100-265.1c-33.6-149.6-3.1-247.7,64-390.8"/>
                </svg>
            </div>
        </div>
    </div>
    <!--#include file="/views/component/header.html"-->
    <div th:replace="header :: header"></div>
    <main id="barba-wrapper">
        <section class="barba-container" data-namespace="home">
            <div class="misc-sticky || js-scroll js-printed-checker">
                <div class="misc-sticky__wrapper wrapper--left">
                    <div class="component-nav-vertical">
                        <div class="nav-vertical__list"></div>
                        <div class="nav-vertical__arrow">
                            <button class="arrow-line arrow--bottom"><span></span> <span></span></button>
                            <button class="arrow-line arrow--top"><span></span> <span></span></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="banner">
                <div class="img">
                    <img th:src="${companyProfile.productBanner}" alt="aaa">
                </div>
            </div>
            <div class="productsd">
                <div class="tnav clearfix">
                    <div class="container">
                        <div class="caption" th:text="${session.lang == 'en' ? product.titleEn : product.title}">玻璃球面镜片</div>
                        <div class="lm component-tabs">
                            <a href="#" data-tabs-items="cpms">产品描述</a>
                            <a href="#" data-tabs-items="jsgg">技术规格</a>
                            <a href="#">下载资料</a>
                        </div>
                    </div>
                </div>
                <style>
                    .flex {
                        width: 1500px;
                        margin: auto;
                        display: flex;
                        justify-content: space-between;
                    }

                    .flex .left-nav {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 200px;
                        height: 400px;
                        background: #f3f5f6;
                        box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, .2);
                        text-align: center;
                        position: relative;
                        margin-right: 80px;
                    }

                    .flex .left-nav .proname {
                        white-space: nowrap;
                        position: absolute;
                        top: -40px;
                        left: 50%;
                        transform: translate(-50%);
                        font-size: 18px;
                        color: #000;
                    }

                    .flex .left-nav .warp a {
                        font-size: 14px;
                        color: #5f5f5f;
                        display: block;
                        margin-bottom: 70px;
                        transition: 0.6s;
                    }

                    .flex .left-nav .warp a:last-child {
                        margin-bottom: 0px;
                    }

                    .flex .left-nav .warp a:hover {
                        color: #ff7a09;
                        text-decoration: underline;
                    }

                    .productsd .tnav .lm {
                        display: none;
                    }

                    .productsd .tnav {
                        display: none;
                    }

                    /*.productsd .box1 .left{*/
                    /*    display: none;*/
                    /*}*/

                    .chan-active {
                        color: #ff7a09 !important;
                        text-decoration: underline !important;
                    }

                    .qie {
                        display: none;
                        margin-top: 60px;
                    }

                    .container {
                        overflow: hidden;
                    }

                    .qie-active {
                        display: block !important;
                    }

                    .pro-download th {
                        background: rgba(72, 165, 242, 1) !important;
                    }

                    .productsd .box1 .left {
                        display: none;
                    }

                    .productsd .box1 .right {
                        width: 60%;
                        text-align: center;
                    }

                    .productsd .box1 {
                        display: flex;
                        justify-content: center;
                    }

                    .register table {
                        table-layout: auto;
                    }

                    .register table td {
                        padding: 5px 0;
                    }

                    .login-main .register h2 {
                        line-height: 52px;
                        margin-bottom: 0;
                    }

                    .login-main .register input {
                        width: auto;
                        height: auto;
                        border-right: 1px solid #ccc;
                    }

                    .login-main .register span {
                        width: auto;
                        height: 34px;
                        padding: 0 10px;
                        color: red;
                    }

                    .register input.submit {
                        width: 124px;
                        height: 36px;
                        font-size: 16px;
                        color: #fff;
                        border: none;
                        background: #1f5a9c;
                        margin-top: 0;
                    }
                </style>
                <div class="flex">
                    <div class="left-nav">
                        <div class="warp">
                            <p class="proname" th:text="${session.lang == 'en' ? product.titleEn : product.title}">玻璃球面镜片</p>
                            <a class="chan-active" href="javascript:;">产品描述</a>
                            <a href="javascript:;">下载资料</a>
                        </div>
                    </div>
                    <div class="container">
                        <div class="qie qie-active">
                            <div class="box1 clearfix" data-tabs-target="cpms">
                                <div class="left">
                                    <p th:text="${session.lang == 'en' ? product.titleEn : product.title}">玻璃球面镜片</p>
                                </div>
                                <div class="right" th:text="${session.lang == 'en' ? product.descriptionEn : product.description}">

                                </div>
                            </div>
                            <div class="content" data-tabs-target="jsgg">
                                <div class="f1">产品介绍</div>
                                <div class="table" th:utext="${session.lang == 'en' ? product.contentEn : product.content}">

                                </div>
                            </div>
                        </div>
                        <div class="qie">
                            <div class="pro-download">
                                <table width="100%">
                                    <tbody>
                                        <tr>
                                            <th><span>文件名称</span></th>
                                            <th>下载</th>
                                        </tr>
                                        <tr th:each="dd: ${dataDowns}">
                                            <td><a th:href="${dd.url}" class="fl" target="_blank" th:text="${dd.title}"></a></td>
                                            <td><a href="javascript:$('#login-box').show();">&nbsp;</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="fanhui">
                            <div class="js-printed-checker">
                                <a href="/product_list_10" class="more btn btn--primary btn--large btn--light">
                                    <div>
                                        <div class="btn__text" data-text="返回列表"><span>返回列表</span></div>
                                        <div class="btn__line arrow-line"><span></span> <span></span></div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--#include file="/views/component/footer.html"-->
            <div th:replace="footer :: footer"></div>
            <style>
                #cnzz_stat_icon_1280183050 {
                    margin-left: 20px;
                }
            </style>
        </section>
    </main>
</div>
</body>
<script>
    window.onload = function () {
        $('.flex .left-nav .warp a').click(function () {
            console.log($(this).index())
            $('.flex .left-nav .warp a').removeClass('chan-active');
            $(this).addClass('chan-active');
            $('.qie').removeClass('qie-active');
            $('.qie').eq($(this).index() - 1).addClass('qie-active');
        })
    }
    $('#register').click(function () {
        $('#login-box').hide();
        $('#register-box').show();
    })
    $('#btnlogin').click(function () {
        var username = $('#username').val();
        var password = $('#password').val();
        if (username == '' || password == '') {
            alert('请填写用户名或者密码');
            return;
        }
        $.ajax({
            type: "POST",
            url: "login.php",
            data: {
                'username': username,
                'password': password
            },
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {
                    alert(data.msg);
                    location.reload();
                } else {
                    alert(data.msg);
                }
            }
        });
    })
    $('#btnregister').click(function () {
        var username = $('#registerUsername').val();
        var email = $('#registerEmail').val();
        var password = $('#registerPassword').val();
        var repassword = $('#registerRepassword').val();
        var work = $('#registerWork').val();
        var contact = $('#registerContact').val();
        var phone = $('#registerPhone').val();
        if (username == '') {
            alert('请填写用户名');
            return;
        }
        if (email == '') {
            alert('请填写Email');
            return;
        }
        if (password == '') {
            alert('请填写密码');
            return;
        }
        if (repassword == '') {
            alert('请填写重复密码');
            return;
        }
        if (work == '') {
            alert('请填写工作单位');
            return;
        }
        if (contact == '') {
            alert('请填写联系电话');
            return;
        }
        if (repassword != password) {
            alert('两次输入的密码不同');
            return;
        }
        $.ajax({
            type: "POST",
            url: "register.php",
            data: {
                'username': username,
                'password': password,
                'email': email,
                'work': work,
                'contact': contact,
                'phone': phone
            },
            dataType: "json",
            success: function (data) {
                if (data.code == 1) {
                    alert(data.msg);
                    location.reload();
                } else {
                    console.log(data)
                    alert(data.msg);
                }
            }
        });
    })
</script>
</html>